<template>
  <div>
    <q-card>
      <q-card-section class="row">
        <!-- 柱状图 -->
        <Column id="column" :height="400" :char-data="charData" class="col-4"/>
        <!-- 圆形图 -->
        <Sector id="sector" :height="400" :char-data="roundDate" class="col-4"/>
        <!-- 折线图 -->
        <broken-line id="roundDate"  :height="400" :char-data="lineData" class="col-4"/>
        <!-- 热力图 -->
        <therma-lpowe id="therma" :height="400" :char-data="funData" class="col-4"></therma-lpowe>
        <!-- 漏斗图 -->
        <fun-nel id="fun" :height="800" :char-data="funData" class="col-4"></fun-nel>
      </q-card-section>
    </q-card>
  </div>
</template>

<script>
import BrokenLine from './Grap/BrokenLine'
import Column from './Grap/Column'
import Sector from './Grap/Sector'
import ThermaLpowe from './Grap/Thermalpowe'
import FunNel from './Grap/FunNel'
export default {
  components: {
    BrokenLine,
    Column,
    Sector,
    ThermaLpowe,
    FunNel
  },
  data () {
    return {
      funData: [{
        'month': '1',
        value: 1078
      }, {
        'month': '2',
        value: 1216
      }, {
        'month': '3',
        value: 758
      }, {
        'month': '4',
        value: 623
      }, {
        'month': '5',
        value: 319
      }, {
        'month': '6',
        value: 422
      }, {
        'month': '7',
        value: -4
      }, {
        'month': '8',
        value: -217
      }, {
        'month': '9',
        value: -358
      }, {
        'month': '10',
        value: 1513
      }, {
        'month': '11',
        value: 1388
      }, {
        'month': '12',
        value: 597
      }],
      charData: [
        {
          type: '电子元器件',
          value: 48000,
          cat: '量产元器件'
        }, {
          type: '磁性材料',
          value: 36000,
          cat: '量产元器件'
        }, {
          type: '被动元件',
          value: 9000,
          cat: '量产元器件'
        }, {
          type: '电子元器件.',
          value: 30500,
          cat: '项目元器件'
        }, {
          type: '磁性材料.',
          value: 22000,
          cat: '项目元器件'
        }, {
          type: '被动愿景.',
          value: 12000,
          cat: '项目元器件'
        }, {
          type: '纸张',
          value: 25000,
          cat: '一般采购'
        }, {
          type: '笔',
          value: 17000,
          cat: '一般采购'
        }, {
          type: '美术',
          value: 8000,
          cat: '一般采购'
        }, {
          type: '收纳',
          value: 2000,
          cat: '一般采购'
        }
      ],
      roundDate:
      [
        {
          item: '量产零部件',
          count: 40,
          percent: 0.4
        }, {
          item: '量产外协件',
          count: 21,
          percent: 0.21
        }, {
          item: '项目前期采购',
          count: 17,
          percent: 0.17
        }, {
          item: '一般采购',
          count: 13,
          percent: 0.13
        }, {
          item: '备品备件',
          count: 9,
          percent: 0.09
        }
      ],
      lineData: [
        {
          year: '2018',
          value: 3
        }, {
          year: '2018.1',
          value: 4
        }, {
          year: '2018.2',
          value: 3.5
        }, {
          year: '2018.3',
          value: 5
        }, {
          year: '2018.4',
          value: 4.9
        }, {
          year: '2018.5',
          value: 6
        }, {
          year: '2018.6',
          value: 7
        }, {
          year: '2018.7',
          value: 9
        }, {
          year: '2018.9',
          value: 13
        }, {
          year: '2018.10',
          value: 14
        }, {
          year: '2018.11',
          value: 15
        }, {
          year: '2018.12',
          value: 16
        }
      ]
    }
  }
}
</script>
